import React from 'react';
import {Platform, ScrollView, StyleSheet, View} from 'react-native';
import {getRealSize} from '../../utils';
import ThemeStyles from '../../styles';
import {bindActionCreators} from 'redux';
import * as authActionCreator from '../../actions/auth-actions';
import {connect} from 'react-redux';
import InputItem from '../../components/input-item';
import Button from '../../components/button';
import Validator from 'async-validator';
import Toast from '../../components/toast';
import {I18n} from '../../reducers/intl';

class ResetpwdScreen extends React.PureComponent {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.resetPwd'),
  });

  state = {
    newPassword: '',
    oldPassword: '',
    confirmPassword: '',
  };

  validator = new Validator({
    oldPassword: {
      required: true,
      message: I18n.t('form.validate.message.oldPwd'),
    },
    newPassword: {
      required: true,
      message: I18n.t('form.validate.message.newPwd'),
    },
    confirmPassword: [
      {
        required: true,
        message: I18n.t('form.validate.message.confirmPwd'),
      },
      {
        validator: (rule, value, callback) => {
          if (this.state.newPassword === value) {
            callback();
          } else {
            callback(new Error(I18n.t('form.validate.message.passwordDiff')));
          }
        },
      },
    ],
  });

  onSubmit = async () => {
    const {navigation, authActions} = this.props;
    try {
      await this.validator.validate(this.state);
      await authActions.changePassword(this.state);
      navigation.goBack();
    } catch (e) {
      if (e.errors) {
        return Toast.show(e.errors[0].message);
      }
      Toast.show(I18n.t('form.validate.message.oldPwdErr'));
    }
  };

  render() {
    return (
      <ScrollView style={Styles.container}>
        <View style={Styles.row}>
          <InputItem
            require
            placeholder={I18n.t('form.placeholder.oldPwd')}
            value={this.state.oldPassword}
            onChange={value => this.setState({oldPassword: value})}
          />
        </View>
        <View style={Styles.row}>
          <InputItem
            require
            placeholder={I18n.t('form.placeholder.newPwd')}
            value={this.state.newPassword}
            onChange={value => this.setState({newPassword: value})}
          />
        </View>
        <View style={Styles.row}>
          <InputItem
            require
            placeholder={I18n.t('form.placeholder.confirmPwd')}
            value={this.state.confirmPassword}
            onChange={value => this.setState({confirmPassword: value})}
          />
        </View>
        <View style={Styles.action}>
          <Button label={I18n.t('button.submit')} onPress={this.onSubmit} />
        </View>
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  profile: state.profile,
});

const mapDispatchToProps = dispatch => ({
  authActions: bindActionCreators(authActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(ResetpwdScreen);

const Styles = StyleSheet.create({
  container: {
    ...ThemeStyles.Color.background.white,
    paddingHorizontal: getRealSize(15),
  },
  row: {
    marginTop: getRealSize(15),
  },
  action: {
    marginTop: getRealSize(48),
  },
});
